import { UIComponent } from '../../../lib/abstract'
import { styles } from './styles'

interface ActionButtonsProps {
  id?: string
  onAdd: () => void
  onReset: () => void
}

export class ActionButtons extends UIComponent<ActionButtonsProps> {
  id: string = 'action-buttons'
  $element: JQuery<HTMLElement> | undefined = undefined

  ELEMENT_SELECTORS = {
    addButton: { selector: '.config-actions .add-btn', dynamic: true },
    resetButton: { selector: '.config-actions .reset-btn', dynamic: true },
  }

  get className(): string {
    return 'action-buttons'
  }

  constructor(props: ActionButtonsProps) {
    super(props)
  }

  render(): string {
    return `
      <div class="${this.className}">
        <div class="btn-group config-actions">
          <button class="btn add-btn">
            <span class="icon">+</span>
            <span class="text">添加配置</span>
          </button>
          <button class="btn reset-btn">
            <span class="icon">↻</span>
            <span class="text">重置组件</span>
          </button>
        </div>
      </div>
    `
  }

  /**
   * 组件样式
   */
  styles(): string {
    return styles(this.className)
  }

  bindEvents(): void {
    this.getElement('addButton')?.on('click', () => {
      this.props.onAdd()
    })
    this.getElement('resetButton')?.on('click', () => {
      this.props.onReset()
    })
  }

  destroy(): void {
    super.destroy()
  }
}
